<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>景点新增</span>
            </div>
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="名称" :label-width="formLabelWidth" prop="spot_name">
                    <el-input v-model="form.spot_name" autocomplete="off" placeholder="景点名称"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth" prop="spot_site">
                    <el-input v-model="form.spot_site" autocomplete="off" placeholder="地址"></el-input>
                </el-form-item>
                <el-form-item label="等级" :label-width="formLabelWidth" prop="spot_level">
                    <el-input v-model="form.spot_level" autocomplete="off" placeholder="等级"></el-input>
                </el-form-item>
                <el-form-item label="开放时间" :label-width="formLabelWidth" prop="spot_time">
                    <el-input v-model="form.spot_time" autocomplete="off" placeholder="开放时间"></el-input>
                </el-form-item>
                <el-form-item label="票价" :label-width="formLabelWidth" prop="spot_rates">
                    <el-input v-model="form.spot_rates" autocomplete="off" placeholder="票价"></el-input>
                </el-form-item>
                <el-form-item label="城市" :label-width="formLabelWidth" prop="spot_cityid">
                    <el-input v-model="form.spot_cityid" autocomplete="off" placeholder="城市"></el-input>
                </el-form-item>
                <el-form-item label="介绍" :label-width="formLabelWidth" prop="spot_address">
                    <el-input type="textarea" v-model="form.spot_address" autocomplete="off" placeholder="介绍"
                        style="min-height: 80px !important;" maxlength="1000" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="图片信息" :label-width="formLabelWidth">
                    <el-upload style="margin:10px 0px!important;" :action="uploadUrl" list-type="picture-card"
                        :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :headers="headerObj"
                        :on-success="handleSuccess" :file-list="fileList">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import api from '@/api'
export default {
    data() {
        //  正则表达式
        return {
            form: {
                spot_name: "",
                spot_site: "",
                spot_address: "",
                spot_level: "",
                spot_time: "",
                spot_rates: "",
                spot_cityid: "",
                spot_img: [],
            },
            updataimg: [],
            headerObj: {
                file: '',
            },
            //1.配置要上传文件的路由
            uploadUrl: "http://localhost:4000/file/uploadImg",
            fileList: [],
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            formLabelWidth: '80px',
            rules: {
                spot_name: [
                    { required: true, message: '请输入景点名称', trigger: 'blur' },
                ],
                spot_site: [
                    { required: true, message: '请输入景点地址', trigger: 'blur' },
                ],
                spot_address: [
                    { required: true, message: '请输入景点介绍', trigger: 'blur' },
                ],
                spot_level: [
                    { required: true, message: '请输入景点等级', trigger: 'blur' },
                ],
                spot_cityid: [
                    { required: true, message: '请输入城市', trigger: 'blur' },
                ],
                spot_time: [
                    { required: true, message: '请选择景点开放时间', trigger: 'blur' },
                ],
                spot_rates: [
                    { required: true, message: '请选择景点票价', trigger: 'blur' },
                ]
            }
        }
    },
    methods: {
        /**上传成功后将图片放入表单 */
        handleSuccess(response, file, fileList) {
            this.updataimg.push(response.url)
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        /**图片删除时对上传的图片也做修改 */
        handleRemove(file) {
            let index = this.updataimg.indexOf(file.response.url);
            if (index !== -1) {
                this.updataimg.splice(index, 1);
            }
        },
        /**上传函数 */
        async handleOk() {
            if (this.updataimg.length == 0) {
                this.$message.error('请上传图片');
            } else {
                this.fileList = [];
                this.dialogFormVisible = false;
                this.form.spot_img = this.updataimg
                let res = await api.addSpots({ ...this.form })
                if (res?.code == 200) {
                    this.$message({
                        message: res.message,
                        type: 'success'
                    });
                    this.$router.push('/layout/spots/list')
                } else {
                    this.$message.error(res.message);
                }
            }
        },
        /**提交表单 */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleOk();
                } else {
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
    width: 340px;
}
</style>